<template>
  <div class="RenderPreview">
    <template v-for="(field, index) in fields" :key="index">
      <template v-if="field.rowType && field.rowType === 'layout' && field.children">
        <RenderPreview :formValue="formValue" :fields="field.children"/>
      </template>
      <template v-else>
        <template v-if="field.layout === 'colFormItem' && formOperates && formOperates[field.vModel]">
          <el-col :span="24">
            <div v-if="formOperates[field.vModel]['formOperate'] == G.FORM_OPERATE.READ">
              <DisabledField :field="field" :value="formValue[field.vModel]" :label="field.label"
                             :options="field.options"/>
            </div>
            <el-form-item
                v-if="formOperates[field.vModel]['formOperate'] == G.FORM_OPERATE.EDIT"
                :label="field.label"
                :prop="field.vModel"
            >
              <component
                  :type="field.type"
                  :is="getElement(field)"
                  v-model="formValue[field.vModel]"
                  v-bind="{...field}"
              >
              </component>
            </el-form-item>
          </el-col>
        </template>
        <template v-else-if="field.layout === 'rowFormItem'">
          <el-col col="24">
            <el-row class="tableRow">
              <el-col>
                <el-form-item
                    :label="field.label"
                    :prop="field.vModel"
                >
                  <FcInputTable :ref="(el)=>getFcInputTable(el)" :fields="field.fields"
                                v-model="formValue[field.vModel]"
                                :config="field" :processDesign="processDesign"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </template>
      </template>
    </template>
  </div>
</template>
<script setup name="RenderPreview">
import FcInputTable from "@/views/flow/formCompoents/FcInputTable/index.vue";
import {getElement} from "@/views/flow/formCompoents/getElement.js";
import DisabledField from "@/views/flow/createDirectly/generatorForm/FormRender/DisabledField.vue";
const props = defineProps({
  fields: {
    type: Object,
    default: () => {
      return undefined;
    }
  },
  processDesign: {
    type: Object,
    default: () => {
      return undefined;
    }
  },
  formValue: {
    type: Object,
    default: () => {
      return {};
    }
  },
  taskId: {
    type: String,
    default: () => {
      return undefined;
    }
  }
})
const {proxy} = getCurrentInstance()
const G = ref(proxy.G)
const receiveFcInputTable = inject('receiveFcInputTable')
const getFcInputTable = (el) => {
  if (el) {
    receiveFcInputTable(el)
  }
}
const formOperates = computed({
  get() {
    try {
      let obj = {}
      props.processDesign.properties.formOperates.forEach((res) => {
        obj[res.vModel] = res
      })
      return obj
    } catch (e) {
      return undefined
    }
  },
  set() {
  },
})
onMounted(() => {
  //非任务，例如发起，或者预览，需要渲染默认值
  if (!props.taskId) {
    props.fields.forEach((field) => {
      if (field.defaultValue) {
        props.formValue[field.vModel] = field.defaultValue
      }
    })
  }
})
</script>
<style scoped lang="scss">
.RenderPreview {
  flex: 0 1 auto;
  width: 100%;
  overflow: hidden;
  padding: 12px;
}
</style>
